<template>
  <default-home-card icon="PieChartTwoTone" title="本周工时统计">
    <div class="echarts-box">
      <div class="pie-main" id="pie-main"></div>
    </div>
  </default-home-card>
</template>
<script setup lang="ts">
import { taskApi } from '/@/api/task/task-api';
import DefaultHomeCard from '/@/views/system/home/default-home-card.vue';
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(() => {
  init();
});

async function init(){
  let res= await taskApi.getManHoursCount();
  let pieData=res.data;
  let option = {
    tooltip: { trigger: 'item'},
    legend: { top: '5%',left: 'center' },
    series: [
      {
        name: '工时统计',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'right'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: pieData
      }
    ]
  };
  let chartDom = document.getElementById("pie-main");
  if (chartDom) {
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  }
}
</script>
<style lang='less' scoped>
.echarts-box {
  display: flex;
  align-items: center;
  justify-content: center;
  .pie-main {
    width: 260px;
    height: 260px;
    background: #fff;
  }
}
</style>
